/* ---------- Advanced swirling background driven by banner colours (artifact-free coverage) ---------- */
:root {
  --bg: #111;
  --c1: #111; --c2: #222; --c3: #333; --c4: #444;
  --c5: #555; --c6: #666; --c7: #777; --c8: #888;
  --fg: #ddd;            /* site-wide text color (softer than pure white) */
  --fg-muted: #bbb;      /* optional muted text */
  --link-pale: #e8e8e8;       /* pale link color for album pages */
  --link-pale-hover: #ffffff; /* hover color */
  --link: #8ec8ff;            /* default link color on dark bg */
  --link-visited: #d3a6ff;    /* visited link color on dark bg */
}

html, body { margin: 0; }
html { background-color: var(--bg, #111); }
body {
  position: relative;
  isolation: isolate; /* keep blend layers from compositing with the canvas */
  background-color: var(--bg, #111);
  color: var(--fg, #ddd);
  font-family: Arial, sans-serif;
  min-height: 100vh;
}

/* Oversize rotating layers so they always cover viewport */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200vmax;   /* large enough to cover corners when rotated */
  height: 200vmax;
  transform-origin: 50% 50%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}

/* Main multi-stop conic layer */
body::before {
  background: conic-gradient(
    at 50% 30%,
    var(--c1) 0turn,
    var(--c2) 0.08turn,
    var(--c3) 0.16turn,
    var(--c4) 0.25turn,
    var(--c5) 0.33turn,
    var(--c6) 0.50turn,
    var(--c7) 0.66turn,
    var(--c8) 0.83turn,
    var(--c1) 1turn
  );
  animation: swirl-rotate-a 60s linear infinite;
}

/* Detail overlay: subtle bands + vignette counter-rotating */
body::after {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.06), rgba(0,0,0,0) 60%),
    repeating-conic-gradient(
      from 0deg at 50% 30%,
      rgba(255,255,255,0.05) 0deg,
      rgba(0,0,0,0.0) 8deg,
      rgba(0,0,0,0.05) 16deg,
      rgba(0,0,0,0.0) 24deg
    );
  mix-blend-mode: overlay; /* light texture */
  opacity: 0.7;            /* reduce intensity */
  animation: swirl-rotate-b 120s linear infinite;
}

/* Ensure page content is above the swirling layers */
body > * { position: relative; z-index: 1; }

/* Include translate in keyframes so centering persists while rotating */
@keyframes swirl-rotate-a {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes swirl-rotate-b {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to   { transform: translate(-50%, -50%) rotate(0deg); }
}

/* Respect user preference to reduce motion */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

/* ---------- banner image full-width ---------- */
#banner { display: block; width: 100%; height: auto; max-width: 100%; }

/* ---------- navigation links row ---------- */
nav ul {
  list-style: none; padding: 0; margin: 0 0 1rem 0;
  display: flex; gap: 1.5rem;
}
nav a { color: var(--fg, #ddd); text-decoration: none; font-weight: 600; }
nav a:hover { text-decoration: underline; }
nav a:visited { color: var(--fg, #ddd); }

/* Default link colors (non-nav, non-album contexts) */
a { color: var(--link, #8ec8ff); }
a:visited { color: var(--link-visited, #d3a6ff); }
a:hover, a:focus { text-decoration: underline; }

/* ---------- album list on Music page ---------- */
.album-grid {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid !important; /* force grid layout */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
  justify-items: center; /* center cards within each cell */
}
.album-grid li { display: block; }
.album-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  text-decoration: none;
}
.album-grid img {
  width: 100%;
  max-width: 320px;
  height: auto;
}
.album-grid span { font-weight: 600; }


/* ---------- track list formatting on album pages ---------- */
.track-list { list-style: none; margin: 0; padding: 0; }
.track-list li { display: flex; gap: 1rem; align-items: center; margin-bottom: .6rem; }
.track-list .title { width: 12rem; text-align: right; }

/* ---------- pale links on album pages ---------- */
.track-list a,
.downloads a {
  color: var(--link-pale, #e8e8e8);
  text-decoration-color: rgba(255,255,255,0.5);
}
.track-list a:visited,
.downloads a:visited {
  color: var(--link-pale, #e8e8e8);
}
.track-list a:hover,
.downloads a:hover {
  color: var(--link-pale-hover, #fff);
  text-decoration-color: rgba(255,255,255,0.8);
}